<!DOCTYPE html>
<html lang="zh_CN" class="h100">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
    <meta name="renderder" content="webkit" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
    <title>安徽省社会消费品零售总额预测系统</title>
    <link rel="shortcut icon" href="../../public/images/pm.ico" />
    <link rel="bookmark" href="../../public/images/pm.ico" type="image/x-icon" 　 />
    <link rel="stylesheet" type="text/css" href="../../public/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../../public/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="../../public/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../../public/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="../../public/js/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="../../public/css/main.css" />
    <link rel="stylesheet" type="text/css" href="../../public/js/select/bootstrap-select.css" />
    <style>
        .bootstrap-select.btn-group,
        .bootstrap-select.btn-group[class*="span"] {
            float: none;
            display: inline-block;
            margin-bottom: 5px;
            margin-left: 0;
        }
        
        .btn {
            padding: 6px 12px;
        }
        
        .layui-table th {
            position: relative;
            padding: 9px 15px;
            min-height: 20px;
            line-height: 20px;
            font-size: 14px;
            width: 350px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* .layui-layer-content {
            height: 500px;
        } */
    </style>
</head>

<body class="h100">
    <div class="container-fluid">
        <div class="row entry-row">
            <div>
                <div class="data-entry-title">
                    <p><i class="data-title-ico"></i><span>数据采集</span></p>
                </div>
                <div class="select-search-type">
                    <div style="margin-left: 10%;">
                        <select id="select-type" class="form-control" style="width: 20%;display: inline-block">
                          <option value="月度" selected>月度</option>
                          <option value="季度">季度</option>
                        </select>
                        <select id="change-select" class="form-control" style="width: 20%;display: inline-block">
                            <option value="2019年2月" >2019年2月</option>
                            <option value="2019年3月" >2019年3月</option>
                            <option value="2019年4月" selected>2019年4月</option>
                            <option value="2019年5月" >2019年5月</option>
                            <option value="2019年6月" >2019年6月</option>
                          </select>
                        <select id="type-select" class="form-control" style="width: 20%;display: inline-block">
                          <option value="MonAnly">分析数据</option>
                          <option value="MonPred" selected>预测数据</option>
                        </select>
                        <select class="selectpicker" multiple data-width="20%">
                            <option value="1" selected>宏观</option>
                            <option value="2" selected>中观</option>
                            <option value="3" selected>微观</option>
                        </select>
                        <button type="button" class="layui-btn layui-btn-primary search" style="height:34px;line-height:34px;">自动采集</button>
                    </div>
                    <p class="message"><i>*</i>数据来源：国家统计局、安徽统计局、中国人民银行、安徽商务厅。</p>
                </div>
            </div>
        </div>
        <div class="row entry-row">
            <div>
                <div class="data-entry-title">
                    <p><i class="title-ico"></i><span>数据导入</span></p>
                </div>
                <div class="">
                    <div class='tabs' id="tabs">
                        <ul class='horizontal'>
                            <li rel="tab-1" class="selectActive"><span>全局</span></li>
                            <li rel="tab-2"><span>宏观</span></li>
                            <li rel="tab-3"><span>中观</span></li>
                            <li rel="tab-4"><span>微观</span></li>
                        </ul>
                        <div rel='tab-1' class="tab-table">
                            <!-- <div class="tab-table-btn">
                                <span class="bule add"><i class="add glyphicon glyphicon-plus"></i>添加</span>
                                <span class="yellow edit"><i class="edit glyphicon glyphicon-pencil"></i>编辑</span>
                                <span class="red delete"><i class="delete glyphicon glyphicon-trash"></i>删除</span>
                                <span class="red save" style="background:#03a9f4"><i class="save glyphicon glyphicon-floppy-save"></i>保存</span>
                            </div> -->
                            <div class="tab-table-content" style="width: 100%;overflow-x: auto;">
                                <table id="table-content1" class="layui-table" style="overflow-x: auto;width:5000px">

                                </table>
                            </div>
                        </div>
                        <div rel='tab-2' class="tab-table">
                            <div style="float: left;width:68%;">
                                <select class="form-control select-type1" style="width: 20%;display: inline-block">
                                          <option value="月度" selected>月度</option>
                                          <option value="季度">季度</option>
                                </select>
                                <select class="form-control change-select1" style="width: 20%;display: inline-block">
                                            <option value="2019年2月" >2019年2月</option>
                                            <option value="2019年3月" >2019年3月</option>
                                            <option value="2019年4月" selected>2019年4月</option>
                                            <option value="2019年5月" >2019年5月</option>
                                            <option value="2019年6月" >2019年6月</option>
                                          </select>
                                <select class="form-control type-select1" style="width: 20%;display: inline-block">
                                          <option value="MonAnly">分析数据</option>
                                          <option value="MonPred" selected>预测数据</option>
                                        </select>

                            </div>
                            <div class="tab-table-btn">
                                <span class="bule add"><i class="add glyphicon glyphicon-plus"></i>添加</span>
                                <span class="yellow edit"><i class="edit glyphicon glyphicon-pencil"></i>编辑</span>
                                <span class="red delete"><i class="delete glyphicon glyphicon-trash"></i>删除</span>
                                <span class="red save" style="background:#03a9f4"><i class="save glyphicon glyphicon-floppy-save"></i>保存</span>
                            </div>
                            <div class="tab-table-content" style="width: 100%;overflow-x: auto;">
                                <table class="layui-table" id="table-content2" style="overflow-x: auto;width:2000px">

                                </table>
                            </div>
                        </div>
                        <div rel='tab-3' class="tab-table">
                            <div style="float: left;width:68%;">
                                <select class="form-control select-type1" style="width: 20%;display: inline-block">
                                                  <option value="月度" selected>月度</option>
                                                  <option value="季度">季度</option>
                                        </select>
                                <select class="form-control change-select1" style="width: 20%;display: inline-block">
                                                    <option value="2019年2月" >2019年2月</option>
                                                    <option value="2019年3月" >2019年3月</option>
                                                    <option value="2019年4月" selected>2019年4月</option>
                                                    <option value="2019年5月" >2019年5月</option>
                                                    <option value="2019年6月" >2019年6月</option>
                                                  </select>
                                <select class="form-control type-select1" style="width: 20%;display: inline-block">
                                                  <option value="MonAnly">分析数据</option>
                                                  <option value="MonPred" selected>预测数据</option>
                                                </select>

                            </div>
                            <div class="tab-table-btn">
                                <span class="bule add"><i class="add glyphicon glyphicon-plus"></i>添加</span>
                                <span class="yellow edit"><i class="edit glyphicon glyphicon-pencil"></i>编辑</span>
                                <span class="red delete"><i class="delete glyphicon glyphicon-trash"></i>删除</span>
                                <span class="red save" style="background:#03a9f4"><i class="save glyphicon glyphicon-floppy-save"></i>保存</span>
                            </div>
                            <div class="tab-table-content" style="width: 100%;overflow-x: auto;">
                                <table class="layui-table" id="table-content3" style="overflow-x: auto;width:2000px">


                                </table>
                            </div>
                        </div>
                        <div rel='tab-4' class="tab-table">
                            <div style="float: left;width:68%;">
                                <select class="form-control select-type1" style="width: 20%;display: inline-block">
                                                  <option value="月度" selected>月度</option>
                                                  <option value="季度">季度</option>
                                        </select>
                                <select class="form-control change-select1" style="width: 20%;display: inline-block">
                                                    <option value="2019年2月" >2019年2月</option>
                                                    <option value="2019年3月" >2019年3月</option>
                                                    <option value="2019年4月" selected>2019年4月</option>
                                                    <option value="2019年5月" >2019年5月</option>
                                                    <option value="2019年6月" >2019年6月</option>
                                                  </select>
                                <select class="form-control type-select1" style="width: 20%;display: inline-block">
                                                  <option value="MonAnly">分析数据</option>
                                                  <option value="MonPred" selected>预测数据</option>
                                                </select>

                            </div>
                            <div class="tab-table-btn">
                                <span class="bule add"><i class="add glyphicon glyphicon-plus"></i>添加</span>
                                <span class="yellow edit"><i class="edit glyphicon glyphicon-pencil"></i>编辑</span>
                                <span class="red delete"><i class="delete glyphicon glyphicon-trash"></i>删除</span>
                                <span class="red save" style="background:#03a9f4"><i class="save glyphicon glyphicon-floppy-save"></i>保存</span>
                            </div>
                            <div class="tab-table-content" style="width: 100%;overflow-x: auto;">
                                <table class="layui-table" id="table-content4" style="overflow-x: auto;width:2000px">


                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 增加弹框 -->
    <div class="add-dialog dn" id="add-dialog">
        <div class="dialog-content" id="add-dialog-content" style="height:380px;overflow: auto;">

        </div>
    </div>
    <div class="add-dialog dn" id="edit-dialog" style="display: none">
        <div class="dialog-content">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">城镇人均消费</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input input1">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">农村人均消费</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input input2">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">人口自然增长率</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input input3">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">城镇居民人均收入</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input input4">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">确定</button>
                        <button type="reset" class="layui-btn layui-btn-primary closebtn">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div id="dele-dialog" style="display: none">
        <div class="layui-form-item" style="text-align: center;margin-top: 40px;">
            <p>确定删除</p>
        </div>
        <div class="layui-form-item">
            <div style="text-align: center">
                <button class="layui-btn closebtn">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary closebtn">取消</button>
            </div>
        </div>
    </div>
    <script id="demo" type="text/html">
        <thead>
            <tr>
                <th><input type="checkbox" name="id" class="td-checkbox"></th>
                <th style="width:400px;">时间</th>
                {{# layui.each(d.name, function(index, item){ }}
                <th>{{item}}</th>
                {{# }); }}
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="id" class="td-checkbox"></td>
                <td>{{d.time}}</td>
                {{# layui.each(d.value, function(index, item){ }}
                <td>{{ item}}</td>
                {{# }); }}
            </tr>
        </tbody>
    </script>
    <script id="dialog" type="text/html">
        <form class="layui-form" action="">
            {{# layui.each(d.name, function(index, item){ }}
            <div class="layui-form-item">
                <label class="layui-form-label">{{item}}</label>
                <div class="layui-input-block">
                    <input id={{index}} type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            {{# }); }}
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确定</button>
                    <button type="reset" class="layui-btn layui-btn-primary closebtn">取消</button>
                </div>
            </div>
        </form>
    </script>
    <script type="text/javascript" src="../../public/js/echarts.js"></script>
    <script type="text/javascript" src="../../public/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../../public/js/layui/layui.js"></script>
    <script type="text/javascript" src="../../public/js/tabs.js"></script>
    <script type="text/javascript" src="../../public/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../public/js/select/bootstrap-select.js"></script>
    <!-- <script type="text/javascript" src="../../public/js/main.js"></script> -->
    <script type="text/javascript">
        $(function() {
            tabs_takes.init("tabs");
            $('.selectpicker').selectpicker({
                'selectedText': 'cat'
            });
            $(".add").click(function() {
                layui.use('layer', function() {
                    var layer = layui.layer;
                    layer.open({
                        type: 1,
                        title: '标题',
                        area: ['600px', '450px'],
                        shade: false,
                        content: $("#add-dialog"),
                        success: function() {
                            for (var i = 0; i < value.length; i++) {
                                $("#" + i).val("")
                            }
                        }
                    });
                });
            })
            $(".edit").click(function() {
                layui.use('layer', function() {
                    var layer = layui.layer;
                    layer.open({
                        type: 1,
                        title: '标题',
                        area: ['600px', '450px'],
                        shade: false,
                        content: $("#add-dialog"),
                        success: function() {
                            for (var i = 0; i < value.length; i++) {
                                $("#" + i).val(value[i])
                            }
                        }
                    });
                });
            })
            $('.delete').click(function() {
                layui.use('layer', function() {
                    var layer = layui.layer;
                    layer.open({
                        type: 1,
                        title: '提示',
                        area: ['300px', '200px'],
                        shade: false,
                        content: $("#dele-dialog")
                    });
                });
            })
            $('.save').click(function() {
                layui.use('layer', function() {
                    var layer = layui.layer;
                    layer.ready(function() {
                        layer.msg("保存成功");
                    })
                });
            })

            $(".add-dialog").on('click', '.closebtn', function() {
                layer.closeAll();
            })
            $("#dele-dialog").on('click', '.closebtn', function() {
                    layer.closeAll();
                })
                //查询列表数据
            $('.search').click(function() {
                    layui.use('layer', function() {
                        var layer = layui.layer;
                        layer.ready(function() {
                            layer.load(2, {
                                shade: [0.1, '#000'] //0.1透明度的白色背景
                            });
                        });
                    });
                    var url = $('#type-select').val() + '/' + $('#change-select').val();
                    $.ajax({
                        type: "GET",
                        url: "http://ansocialsale.frpgz1.idcfengye.com/queryData/" + url,
                        // dataType: 'jsonp', 
                        contentType: "application/json",
                        dataType: "json",
                        success: function(res) {
                            setTimeout(function(){
                              layer.closeAll("loading");
                            },2000)
                            layui.use('laytpl', function() {
                                var laytpl = layui.laytpl;
                                var data = res
                                    //模板渲染
                                var getTpl = demo.innerHTML,
                                    view = document.getElementById('table-content1');
                                laytpl(getTpl).render(data, function(html) {
                                    view.innerHTML = html;
                                })
                                var getTpl = demo.innerHTML,
                                    view = document.getElementById('table-content2');
                                laytpl(getTpl).render(data, function(html) {
                                    view.innerHTML = html;
                                })
                                var getTpl = demo.innerHTML,
                                    view = document.getElementById('table-content3');
                                laytpl(getTpl).render(data, function(html) {
                                    view.innerHTML = html;
                                })
                            })
                        }
                    })
                })
                //月度切换
            $('#select-type').on('change', function() {
                if ($(this).val() == "月度") {
                    var str = `
  
                    <option value="2019年2月" >2019年2月</option>
                    <option value="2019年3月" >2019年3月</option>
                    <option value="2019年4月">2019年4月</option>
                    <option value="2019年5月">2019年5月</option>
                    <option value="2019年6月">2019年6月</option>
                    `
                    var str2 = `
                    <option value="MonAnly">分析数据</option>
                    <option value="MonPred">预测数据</option>
                    `
                } else {
                    var str = `
                    <option value="2018年3季度">2018Q3</option>
                    <option value="2018年4季度" >2018Q4</option>
                    <option value="2019年1季度">2019Q1</option>
                    <option value="2019年2季度">2019Q2</option>
                    `
                    var str2 = `
                    <option value="SeaAnly">分析数据</option>
                    <option value="SeaPred">预测数据</option>
                    `
                }
                $("#change-select").html(str)
                $("#type-select").html(str2)
            })
            $('.select-type1').on('change', function() {
                    if ($(this).val() == "月度") {
                        var str = `
  
                    <option value="2019年2月" >2019年2月</option>
                    <option value="2019年3月" >2019年3月</option>
                    <option value="2019年4月">2019年4月</option>
                    <option value="2019年5月">2019年5月</option>
                    <option value="2019年6月">2019年6月</option>
                    `
                        var str2 = `
                    <option value="MonAnly">分析数据</option>
                    <option value="MonPred">预测数据</option>
                    `
                    } else {
                        var str = `
                    <option value="2018年3季度">2018Q3</option>
                    <option value="2018年4季度" >2018Q4</option>
                    <option value="2019年1季度">2019Q1</option>
                    <option value="2019年2季度">2019Q2</option>
                    `
                        var str2 = `
                    <option value="SeaAnly">分析数据</option>
                    <option value="SeaPred">预测数据</option>
                    `
                    }

                    $(this).parent().find(".change-select1").html(str)
                    $(this).parent().find(".type-select1").html(str2)
                })
                //初始化数据加载
            var url = $('#type-select').val() + '/' + $('#change-select').val();
            $.ajax({
                    type: "GET",
                    url: "http://ansocialsale.frpgz1.idcfengye.com/queryData/" + url,
                    // dataType: 'jsonp', 
                    contentType: "application/json",
                    dataType: "json",
                    success: function(res) {
                        layui.use('laytpl', function() {
                            var laytpl = layui.laytpl;
                            var data = res
                                //模板渲染
                            var getTpl = demo.innerHTML,
                                view = document.getElementById('table-content1');
                            laytpl(getTpl).render(data, function(html) {
                                view.innerHTML = html;
                            })
                            var getTpl = demo.innerHTML,
                                view = document.getElementById('table-content2');
                            laytpl(getTpl).render(data, function(html) {
                                view.innerHTML = html;
                            })
                            var getTpl = demo.innerHTML,
                                view = document.getElementById('table-content3');
                            laytpl(getTpl).render(data, function(html) {
                                view.innerHTML = html;
                            })
                            var getTpl = demo.innerHTML,
                                view = document.getElementById('table-content4');
                            laytpl(getTpl).render(data, function(html) {
                                view.innerHTML = html;
                            })
                        })
                    }
                })
                //tab切换
            $('.horizontal li').click(function() {
                if ($(this).index() == 1) {
                    var url = $('#type-select').val() + '/' + $('#change-select').val() + '/macro';
                    $.ajax({
                        type: "GET",
                        url: "http://ansocialsale.frpgz1.idcfengye.com/queryData/" + url,
                        // dataType: 'jsonp', 
                        contentType: "application/json",
                        dataType: "json",
                        success: function(res) {
                            layui.use('laytpl', function() {
                                var laytpl = layui.laytpl;
                                var data = res
                                value = data.value
                                    //模板渲染
                                var getTpl = demo.innerHTML,
                                    view = document.getElementById('table-content2');
                                laytpl(getTpl).render(data, function(html) {
                                    view.innerHTML = html;
                                })
                                var getTpl2 = dialog.innerHTML,
                                    view2 = document.getElementById('add-dialog-content')
                                laytpl(getTpl2).render(data, function(html) {
                                    view2.innerHTML = html;
                                })
                            })
                        }
                    })
                }
                if ($(this).index() == 2) {
                    var url = $('#type-select').val() + '/' + $('#change-select').val() + '/meso';
                    $.ajax({
                        type: "GET",
                        url: "http://ansocialsale.frpgz1.idcfengye.com/queryData/" + url,
                        // dataType: 'jsonp', 
                        contentType: "application/json",
                        dataType: "json",
                        success: function(res) {
                            layui.use('laytpl', function() {
                                var laytpl = layui.laytpl;
                                var data = res
                                value = data.value
                                    //模板渲染
                                var getTpl = demo.innerHTML,
                                    view = document.getElementById('table-content3');
                                laytpl(getTpl).render(data, function(html) {
                                    view.innerHTML = html;
                                })
                                var getTpl2 = dialog.innerHTML,
                                    view2 = document.getElementById('add-dialog-content')
                                laytpl(getTpl2).render(data, function(html) {
                                    view2.innerHTML = html;
                                })
                            })
                        }
                    })
                }
                if ($(this).index() == 3) {
                    var url = $('#type-select').val() + '/' + $('#change-select').val() + '/micro';
                    $.ajax({
                        type: "GET",
                        url: "http://ansocialsale.frpgz1.idcfengye.com/queryData/" + url,
                        // dataType: 'jsonp', 
                        contentType: "application/json",
                        dataType: "json",
                        success: function(res) {
                            layui.use('laytpl', function() {
                                var laytpl = layui.laytpl;
                                var data = res
                                value = data.value
                                    //模板渲染
                                var getTpl = demo.innerHTML,
                                    view = document.getElementById('table-content4');
                                laytpl(getTpl).render(data, function(html) {
                                    view.innerHTML = html;
                                })
                                var getTpl2 = dialog.innerHTML,
                                    view2 = document.getElementById('add-dialog-content')
                                laytpl(getTpl2).render(data, function(html) {
                                    view2.innerHTML = html;
                                })
                            })
                        }
                    })
                }
            })
        })
    </script>
</body>

</html>